import React from 'react';
import {
    StyleSheet,
    Image,
    TouchableOpacity,
    Text,
    View,
} from 'react-native';

export default class CustomImageButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonPressed: false,
        }
    }
    static initialState = {
        buttonPressed: false,
    };
    static defaultProps = {
        source: null,
        highlightedSource: null,
        onPress: null,
    };
    _buttonPressIn() {
        this.setState({ buttonPressed: true });
    }
    _buttonPressOut() {
        this.setState({ buttonPressed: false });
    }
    _isButtonPressed() {
        return this.state.buttonPressed;
    }
    render() {
        let source = this.props.source;
        if (this._isButtonPressed() && this.props.highlightedSource) {
            source = this.props.highlightedSource;
        }
        return (
            <TouchableOpacity
                onPress={this.props.onPress}
                onPressIn={this._buttonPressIn.bind(this)}
                onPressOut={this._buttonPressOut.bind(this)}
                activeOpacity={this._isButtonPressed() ? 0.0 : 1.0}
            >
                <View style={[styles.viewStyle]}>
                    <Image style={this.props.style} source={source} />
                    <Text style={{ marginLeft: 50, fontWeight: "bold", fontSize: 16, color: this._isButtonPressed() ? "#49EF2E" : "white" }}>定 时</Text>
                </View>
            </TouchableOpacity>
        );
    }
};


var styles = StyleSheet.create({
    viewStyle: {
        flexDirection: 'column',
        alignItems: 'center',
    }
});
